<template>
    <el-form style="width: 100%;" ref="formObj" :model="searchFormData" :inline="true" :rules="rules"
        class="query-form">
        <el-row style="margin-top: 15px;" :gutter="10" v-for="(ele, index) in searchFormItemConfig" :key="index"
            v-show="index === 0 ? true : isHiddenBtn">
            <template v-if="index === searchFormItemConfig.length - 1 && ele.length !== 4">
                <el-col :span="6" v-for="(itemIndex) in [0, 1, 2, 3]" :key="itemIndex">
                    <el-form-item v-if="ele[itemIndex]" :label="ele[itemIndex].formItemLabel + ' :'"
                        :prop="ele[itemIndex].prop" v-show="isHiddenBtn">
                        <component :is="getComponentSize(ele[itemIndex].elItem)"
                            v-model="searchFormData[ele[itemIndex].vModelfield]" v-bind="ele[itemIndex].attributesBind">
                            <template #default v-if="ele[itemIndex].elItem === 'ElSelect'">
                                <el-option v-for="(groupCon, groupIndex) in ele[itemIndex].optionConfigs"
                                    :key="groupIndex" :label="groupCon.label" :value="groupCon.value" />
                            </template>
                            <template #default v-else-if="ele[itemIndex].elItem === 'ElCheckboxGroup'">
                                <el-checkbox v-for="(groupCon, groupIndex) in ele[itemIndex].optionConfigs"
                                    :key="groupIndex" :label="groupCon.label" :value="groupCon.value" />
                            </template>
                            <template #default v-else-if="ele[itemIndex].elItem === 'ElRadioGroup'">
                                <el-radio v-for="(groupCon, groupIndex) in ele[itemIndex].optionConfigs"
                                    :key="groupIndex" :value="groupCon.value">{{ groupCon.label }}</el-radio>
                            </template>
                        </component>
                    </el-form-item>
                    <div v-else-if="itemIndex !== 3"></div>
                    <div class="page_form_btn" v-show="isHiddenBtn" v-else>
                        <div>
                            <el-button type="primary" @click="searchFn">查询</el-button>
                            <el-button @click="resetFn">重置</el-button>
                        </div>
                        <span class="page_form_btn_icontext" @click="isHiddenBtn = !isHiddenBtn">
                            收起
                            <el-icon class="page_form_btn_icon">
                                <ArrowUp />
                            </el-icon>
                        </span>
                    </div>
                </el-col>
            </template>
            <template v-else>
                <el-col :span="6" v-for="(item, eleindex) in ele" :key="eleindex">
                    <div class="page_form_btn" v-show="!isHiddenBtn" v-if="index === 0 && eleindex === 3">
                        <div>
                            <el-button type="primary" @click="searchFn">查询</el-button>
                            <el-button @click="resetFn">重置</el-button>
                        </div>
                        <span class="page_form_btn_icontext" @click="isHiddenBtn = !isHiddenBtn">
                            展开
                            <el-icon class="page_form_btn_icon">
                                <ArrowDown />
                            </el-icon>
                        </span>
                    </div>
                    <el-form-item :label="item.formItemLabel + ' :'" :prop="item.prop" v-show="isHiddenBtn"
                        v-if="index === 0 && eleindex === 3">
                        <component :is="getComponentSize(item.elItem)" v-model="searchFormData[item.vModelfield]"
                            v-bind="item.attributesBind">
                            <template #default v-if="item.elItem === 'ElSelect'">
                                <el-option v-for="(groupCon, groupIndex) in item.optionConfigs" :key="groupIndex"
                                    :label="groupCon.label" :value="groupCon.value" />
                            </template>
                            <template #default v-else-if="item.elItem === 'ElCheckboxGroup'">
                                <el-checkbox v-for="(groupCon, groupIndex) in item.optionConfigs" :key="groupIndex"
                                    :label="groupCon.label" :value="groupCon.value" />
                            </template>
                            <template #default v-else-if="item.elItem === 'ElRadioGroup'">
                                <el-radio v-for="(groupCon, groupIndex) in item.optionConfigs" :key="groupIndex"
                                    :value="groupCon.value">{{ groupCon.label }}</el-radio>
                            </template>
                        </component>
                    </el-form-item>
                    <el-form-item :label="item.formItemLabel + ' :'" :prop="item.prop" v-else>
                        <component :is="getComponentSize(item.elItem)" v-model="searchFormData[item.vModelfield]"
                            v-bind="item.attributesBind">
                            <template #default v-if="item.elItem === 'ElSelect'">
                                <el-option v-for="(groupCon, groupIndex) in item.optionConfigs" :key="groupIndex"
                                    :label="groupCon.label" :value="groupCon.value" />
                            </template>
                            <template #default v-else-if="item.elItem === 'ElCheckboxGroup'">
                                <el-checkbox v-for="(groupCon, groupIndex) in item.optionConfigs" :key="groupIndex"
                                    :label="groupCon.label" :value="groupCon.value" />
                            </template>
                            <template #default v-else-if="item.elItem === 'ElRadioGroup'">
                                <el-radio v-for="(groupCon, groupIndex) in item.optionConfigs" :key="groupIndex"
                                    :value="groupCon.value">{{ groupCon.label }}</el-radio>
                            </template>
                        </component>
                    </el-form-item>
                </el-col>
            </template>
        </el-row>
        <el-row style="margin-top: 15px;" :gutter="10"
            v-if="searchFormItemConfig[searchFormItemConfig.length - 1].length === 4" v-show="isHiddenBtn">
            <el-col :span="6" :offset="18">
                <div class="page_form_btn" v-show="isHiddenBtn">
                    <div>
                        <el-button type="primary" @click="searchFn">查询</el-button>
                        <el-button @click="resetFn">重置</el-button>
                    </div>
                    <span class="page_form_btn_icontext" @click="isHiddenBtn = !isHiddenBtn">
                        收起
                        <el-icon class="page_form_btn_icon">
                            <ArrowUp />
                        </el-icon>
                    </span>
                </div>
            </el-col>
        </el-row>
    </el-form>
</template>

<script lang='ts' setup name='queryForm'>
import { onMounted, ref } from 'vue';
import type { FormRules } from 'element-plus';
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import { setFormItemConfigs } from '../../hooks/initFormItemconfig';
import { dealFormItemConfig, getComponentSize, getRules } from '../../hooks/dealComponents'


const props = defineProps({
    formItemConfigs: {
        type: Array<fieldConfig>,
        required: true
    }
})
const emitHolder = defineEmits(['search']);
const formObj = ref();
const searchFormData = defineModel<any>('searchFormData', { required: true });
const searchFormItemConfig = ref<formItemConfigType[][]>([[]]);
const rules = ref<FormRules>({});
const isHiddenBtn = ref(false)


const searchFn = () => {
    emitHolder('search');
}
const resetFn = () => {
    searchFormData.value = {};
}

onMounted(() => {
    setFormItemConfigs(props.formItemConfigs).then((elFormConfig: { isShowFormRuleDescription: boolean, formItemConfigs: formItemConfigType[] }) => {
        let ItemConfig: any[] = dealFormItemConfig(elFormConfig.formItemConfigs);
        let ItemConfigLength = ItemConfig.length;
        searchFormItemConfig.value = [];
        for (let index = 0; index < ItemConfigLength / 4; index++) {
            searchFormItemConfig.value.push(ItemConfig.slice(0, 4))
            ItemConfig = ItemConfig.slice(4);
        }
        rules.value = getRules(elFormConfig.formItemConfigs, false);
    })
})
defineExpose({
    formObj
})
</script>

<style lang="scss" scoped>
.query-form {
    .page_form_btn {
        max-width: 240px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .page_form_btn_icontext {
        font-size: 14px;
        font-weight: 400;
        color: #409eff;
        cursor: pointer;
        margin-left: 8px;
    }

    :deep(.el-form-item) {
        margin-bottom: unset;
        margin-right: 15px;
    }
}
</style>
